/**
 * 设置主题
 */
import { defineStore } from 'pinia'
//import { useStorage } from '@vueuse/core' //这个是将数据存储到本地内存中localStorage
import { type Ref, ref } from 'vue'
import { SettingTypeEnum } from '@/enums/SettingTypeEnum'
import defaultSettings from '@/config/settings'
import { useDynamicTitle } from '@/utils/dynamicTitle'

export const useSettingsStore = defineStore('setting', () => {
  const storageSetting = JSON.parse(localStorage.getItem('layout-setting') || '{}')
  const prop: { [key: string]: Ref<any> } = {
    title: ref<string>(''),
    dynamicTitle: ref<boolean>(
      storageSetting.dynamicTitle === undefined
        ? defaultSettings.dynamicTitle
        : storageSetting.dynamicTitle
    ),
    theme: ref<string>(storageSetting.theme || defaultSettings.theme),
    sideBgColor: ref<string>(storageSetting.sideBgColor || defaultSettings.sideBgColor),
    sideTextColor: ref<string>(storageSetting.sideTextColor || defaultSettings.sideTextColor),
    minLayout: ref<boolean>(storageSetting.minLayout || defaultSettings.minLayout),
    tagsView: ref<boolean>(
      storageSetting.tagsView === undefined ? defaultSettings.tagsView : storageSetting.tagsView
    ),
    minSubmenu: ref<boolean>(storageSetting.minSubmenu || defaultSettings.minSubmenu),
    animationEnable: ref<boolean>(
      storageSetting.animationEnable === undefined
        ? defaultSettings.animationEnable
        : storageSetting.animationEnable
    ),
    dark: ref<boolean>(storageSetting.dark || defaultSettings.dark),
    topNav: ref<boolean>(
      storageSetting.topNav === undefined ? defaultSettings.topNav : storageSetting.topNav
    ),
    collapse: ref<boolean>(storageSetting.collapse || defaultSettings.collapse),
    headSidebar: ref<boolean>(
      storageSetting.headSidebar === undefined
        ? defaultSettings.headSidebar
        : storageSetting.headSidebar
    )
  }

  // actions  修改Prop值
  const changeSetting = (param: { key: SettingTypeEnum; value: any }) => {
    const { key, value } = param
    if (key in prop) {
      prop[key].value = value
    }
  }
  //设置标题
  const setTitle = (value: string) => {
    title.value = value
    useDynamicTitle()
  }

  const setMinSubmenu = (value: boolean): void => {
    minSubmenu.value = value
  }

  const {
    title,
    theme,
    sideBgColor,
    sideTextColor,
    minLayout,
    minSubmenu,
    dynamicTitle,
    dark,
    tagsView,
    topNav,
    animationEnable,
    collapse,
    headSidebar
  } = prop

  return {
    title,
    theme,
    sideBgColor,
    sideTextColor,
    minLayout,
    minSubmenu,
    dynamicTitle,
    tagsView,
    dark,
    animationEnable,
    topNav,
    collapse,
    headSidebar,
    changeSetting,
    setTitle,
    setMinSubmenu
  }
})

export default useSettingsStore
